//funnelChart.vue
<template>
  <div
    id="elId"
    style="margin-left: 2px; margin-right: 2px; height: 250px; width: 500px"
  ></div>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
export default {
  name: "FunnelChart",
  //   props: {
  //     chartData: {
  //       type: Array
  //     },
  //     query: {
  //       type: Object,
  //       default: function () {
  //         return {}
  //       }
  //     }
  //   },
  //   watch: {
  //     chartData: { //获取需要显示的数据
  //       handler: function (newVal, oldVal) {
  //         this.init()
  //       },
  //       deep: true
  //     }
  //   },
  data() {
    return {
      dataList: [],
      elId: "",
    };
  },
  created() {
    // this.elId = uuidv1(); //
    this.dataList = [
      { value: 44, name: "易制毒", num: 44, l: 16.123, kg: 5.521 },
      { value: 39, name: "易制爆", num: 39, l: 12.321, kg: 4.254 },
      { value: 33, name: "剧毒", num: 33, l: 10.254, kg: 4.012 },
      //   { value: 27, name: "爆炸", num: 27, l: 9.213, kg: 3.654 },
      //   { value: 14, name: "精麻品", num: 14, l: 8.214, kg: 3.218 },
    ];
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}%",
        },
        labelLine: {
          show: true,
        },
        series: [
          {
            name: "漏斗",
            type: "funnel",
            top: 10,
            bottom: 10,
            left: -60,
            width: "100%",
            height: "80%",
            min: 0,
            max: 100,
            minSize: "10%",
            maxSize: "100%",
            sort: "descending",
            gap: 0,
            color: ["#705CFB", "#687799", "#56DFA9", "#5B8EF9"],
            label: {
              //设置字体放在漏斗内部
              position: "inside",
              formatter: function (params) {
                return (
                  params.data.name +
                  "\n" +
                  // "微: " +
                  params.data.value +
                  "万" +
                  "\n" +
                  "同比: " +
                  params.data.yoy +
                  "%"
                );
              },
              color: "#fff",
              fontStyle: "normal",
              textBorderColor: "#fff", //边框
            },
            // data: this.dataRight,
            data: this.dataList,
          },
          {
            name: "漏斗", //名字
            type: "funnel", //echarts类型
            top: 10,
            bottom: 10,
            left: -60, // 距左侧的距离
            width: "100%", //宽
            height: "80%", //高
            min: 0, //
            max: 100,
            minSize: "10%", //漏斗最小值的宽度
            maxSize: "100%", //漏斗最大值的宽度
            sort: "descending", // 金字塔形:'ascending', 漏斗图形:'descending'
            gap: 0, //图例之间的间隔
            color: ["#705CFB", "#687799", "#56DFA9", "#5B8EF9"],
            label: {
              //漏斗外部显示的
              position: "right", //位置
              formatter: function (params) {
                return (
                  params.data.twoname +
                  "\n" +
                  // params.data.value +
                  "(" +
                  params.data.twoyoy +
                  ")%"
                );
              },
              // fontStyle: 'normal',
              // textBorderColor: '#fff',
            },
            itemStyle: {
              opacity: 1, //图形透明度
              borderColor: "#fff", //图形边框颜色
              borderWidth: 0, //图形边框宽度
            },
            data: this.dataList,
            // z: 100,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      var myChartDom = document.getElementById("elId");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.jy-container {
  width: 100%;
  min-height: 450px;
}
</style>